<template>
  <div class="article-comments">
    <!-- 评论列表 -->
    <!-- immediate-check 关闭 van-list 监听页面进入的时候位置检查，从而去主动触发onLoad -->
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <!-- 评论项组件 -->
      <comment-item 
        v-for="(item,index) in list"
        :key="index"
        :comment-info="item"
        @openReply="$emit('openReply',$event)"
      />
    </van-list>
    <!-- 评论列表 -->  
  </div>
</template>

<script>
import { getComments } from '@/api/comment'
import commentItem from './comment-item';
  export default {
    components: { commentItem },
    name: "CommentList",
    props: {
      // 文章ID 或  评论ID
      sourceId:{
        type:[Object,Number,String],
        require:true
      },
      // 评论列表
      list:{
        type:Array,
        require:true
      },
      // 请求的类型  a表示文章评论，c表示评论回复
      type:{
        type:String,
        default:'a'
      }
    },
    data() {
      return {
        // list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false, // 是否加载结束
        offset:null,  // 偏移ID，本质是页码
        limit:10  // 每页数量
      };
    },
    created(){
      this.loading = true // 加载开始
      this.onLoad()  // 主动触发onLoad
    },
    methods: {
      async onLoad() {
        try {
           // 1. 请求数据
           let {data:res} = await getComments({
              type:this.type,   // a 获取文章评论   c 获取评论回复
              // 带上toString，否则查询参数会将引号转移，传递给后台出现报错
              source: this.sourceId.toString(), // 源ID 文章的ID或评论的ID
              offset:this.offset, // 页码
              limit:this.limit  // 每页数量
           })
          // 2. 追加数据
          this.list.push(...res.data.results)
          // 更新父的评论总数
          this.$emit('updateCommentCount',res.data.total_count)
          // 3. 关闭加载
          this.loading = false
          // 4. 判断结束
          if(res.data.results.length < this.limit){
            this.finished = true
          }else{
            // 5. 页码变化
            this.offset = res.data.last_id
          }
        } catch (error) {
          this.$toast.fail('获取评论失败')
          console.log(error);
        }
      },
    }
  };
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
</style>